import { Col, Row, Typography, Tabs } from 'antd'
import React from 'react'
import { useState } from 'react'
import "./index.scss"
import LoginAccount from './LoginAccount'
import LoginPhone from './LoginPhone'
import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom';
const { Title } = Typography
const { TabPane } = Tabs

function Login(props: any) {
    const { userInfo } = props.info
    console.log(userInfo.avatar);

    const [active, setactive] = useState('account')
    const changeActive = (key: any) => {
        setactive(key)
    }
    return (
        <div className='login'>
            <video className='myvideo' autoPlay loop muted playsInline src={require('../../assets/images/yanhua.mp4').default} ></video>
            <Row style={{ height: '100vh' }}>
                <Col span={24}>
                    <div className="login-box">
                        <Title className="title" level={3}> 欢迎访问千中海物业管理系统 </Title>
                        <div className="box">
                            <Tabs defaultActiveKey={active} onChange={changeActive}>
                                <TabPane tab="账号登陆" key="account">
                                    <LoginAccount></LoginAccount>
                                </TabPane>
                                <TabPane tab="手机登录" key="phone">
                                    <LoginPhone />
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}
export default inject('info')(withRouter(observer(Login)))